<template>
  <div id="order-reply-page"
       :style="{
    minHeight:(this.getWinSize().height-this.getSafeArea().top-(isOnlyShow?1:30))+'px'
  }"
       v-if="order.id>0">
    <div class="page-title" :style="{top:(this.getSafeArea().top-4)+'px'}">
      <div id="back-button" @click="$router.push('/OrderDetail?id='+$route.query.id)">
        <i href="javascript:void(0)" class="el-icon-arrow-left"></i>
      </div>
      <span>商品评价</span>
    </div>

    <div class="product-box" style="position: relative;" :style="{top:(this.getSafeArea().top-4)+'px'}">
      <div class="item" v-for="(product,index) in productList" :key="index">
        <div class="image">
          <img :src="product.productImage"/>
        </div>
        <div class="name-box">
          <div class="name">
            <span class="ovd_s" v-text="product.productName"></span>
          </div>
          <div class="model">
            <span
              class="ovd_s"
              :style="{
              maxWidth:modelMaxWidth+'px'
            }" v-text="product.productModel"></span>
          </div>
          <div class="price">
            <span v-text="'￥'+ToMoney(product.productPrice)"></span>
          </div>
          <div class="score-box">
<!--            <span v-text="order.replyId"></span>-->

            <el-rate v-if="order.replyId===0" v-model="form.productScore[product.id]"
                     :disabled="isOnlyShow"
                     allow-half
                     show-score
                     show-text
                     text-color="#ff9900"></el-rate>

            <el-rate v-if="order.replyId>0" v-model="(form.productScore[product.id]*0.05).toFixed(2)-0"
                     :disabled="isOnlyShow"
                     allow-half
                     show-score
                     show-text
                     text-color="#ff9900"></el-rate>
          </div>
        </div>
      </div>
    </div>

    <div class="form-box" style="position: relative" :style="{top:(this.getSafeArea().top-4)+'px'}">
      <textarea v-model="form.content" :readonly="isOnlyShow"></textarea>
      <!--上传图片/视频-->
      <div class="upload-box">
        <div class="image-item" v-for="(imageUrl,index) in form.imageArr">
          <i class="el-icon-remove" @click="removeImage(imageUrl)" v-if="!isOnlyShow"></i>
          <el-image :preview-src-list="[imageUrl]" :src="imageUrl"/>
        </div>
<!--        <el-upload class="upload-button" v-if="!isOnlyShow" style="position: relative; top: 10px;right: 10px;"-->
<!--                   name="myUploadFile"-->
<!--                   :headers="getHeader()"-->
<!--                   :action="UploadFileUrl"-->
<!--                   :show-file-list="false"-->
<!--                   :on-success="successUpload">-->
<!--          <i class="el-icon-camera-solid"></i>-->
<!--          <span>拍照/视频</span>-->
<!--        </el-upload>-->
        <div v-if="!isOnlyShow && form.imageArr.length<limitNums" class="upload-button" @click="addPhoto">
          <i class="el-icon-camera-solid"></i>
          <span>拍照/视频</span>
        </div>
      </div>
      <!--评分-->
      <div class="reply-box">
        <div class="item">
          <div class="title">
            店铺评分:
          </div>
          <div class="value">
            <el-rate v-model="form.shopScore"
                     :disabled="isOnlyShow"
                     allow-half
                     show-score
                     show-text
                     text-color="#ff9900"></el-rate>
          </div>
        </div>

        <div class="item">
          <div class="title">
            物流评分:
          </div>
          <div class="value">
            <el-rate v-model="form.expressScore"
                     :disabled="isOnlyShow"
                     allow-half
                     show-score
                     show-text
                     text-color="#ff9900"></el-rate>
          </div>
        </div>


      </div>
      <!--热门标签-->
    </div>

<!--    <div class="tag-box" style="position: relative" :style="{top:(this.getSafeArea().top-4)+'px'}">-->
<!--      <div class="name">热门标签:</div>-->
<!--      <div class="value" v-if="!isOnlyShow">-->
<!--        <div class="item" v-for="(tag,index) in hotTagArr" :key="index" v-text="tag"-->
<!--             :class="form.hotTag===tag?'curr':''" @click="chooseHotTag(tag)"></div>-->
<!--        <div class="c"></div>-->
<!--      </div>-->

<!--      <div class="value" v-if="isOnlyShow">-->
<!--        <div class="item curr" v-for="(tag,index) in form.hotTag" :key="index" v-text="tag"></div>-->
<!--        <div class="c"></div>-->
<!--      </div>-->
<!--    </div>-->

    <div class="bottom-bar" v-if="!isOnlyShow">
      <el-button size="small" style="width: 80%;" type="danger" @click="submit">提交评价</el-button>
    </div>

    <my-photo ref="my-photo"/>
  </div>
</template>

<script>
import MyPhoto from '../common/MyPhoto'
export default {
  name: 'OrderReply',
  components: {MyPhoto},
  beforeDestroy () {
    this.$refs['my-photo'].closeCamera()
  },
  data: function () {
    return {
      modelMaxWidth:(this.getWinSize().width-80)*0.9,
      limitNums: 3,
      type: 'form',
      isOnlyShow: false,
      form: {
        id: 0,
        content: '',
        imageArr: [
          // 'http://image.yangfankj.com/product/110/0.jpg',
          // 'http://image.yangfankj.com/product/105/0.jpg',
          // 'http://image.yangfankj.com/product/108/0.jpg',
        ],
        productScore: {},
        shopScore: 0,
        expressScore: 0,
        hotTag: []
      },
      order: {
        id: 0,
        replyId:0
      },
      productList: demoData.chooseProductList,
      hotTagArr: ['性价比高', '很实用', '外观大方']
    }
  },
  mounted () {
    if (this.$route.query.type && this.$route.query.type === 'show') {
      this.getDetail()
    } else {
      this.getPreData()
    }
  },
  methods: {
    addPhoto:function () {
      let $this=this
      if (typeof plus==='undefined'){
        // this.form.imageArr.push('https://yangfan-shop.oss-cn-hangzhou.aliyuncs.com/upload-file/2023-04-27/20230427151219279.png')
        this.$forceUpdate()
        return
      }
      $this.$refs['my-photo'].chooseAct(function (filePath) {
        $this.uploadImage(filePath,function (url) {
          console.log('url',url)
          $this.form.imageArr.push(url)
          $this.$forceUpdate()
        })
      })
    },
    // 上传头像
    uploadImage: function (filePath,callback) {
      let $this = this
      var wt = plus.nativeUI.showWaiting()
      var task = plus.uploader.createUpload($this.UploadFileUrl,
        {method: 'POST'},
        function (returnData, status) {
          var res=JSON.parse(returnData.responseText)
          // 上传完成
          if (status === 200) {
            // plus.nativeUI.alert('上传成功:' + res)
            callback(res.data)
            wt.close()
          } else {
            plus.nativeUI.alert('上传失败:' + status)
            wt.close()
          }
        }
      )
      task.addFile(filePath, {key: 'myUploadFile', name: 'myUploadFile'})
      task.setRequestHeader('Authorization', 'Bearer '+$this.CurrUser.getToken())
      task.setRequestHeader('DeviceID', $this.GetDeviceID())
      task.setRequestHeader('UserType', 'Member')

      /**
       * Authorization: 'Bearer ' + this.CurrUser.Token,
       *     DeviceId: Vue.prototype.GetDeviceID(),
       *     UserType: 'Member'
       */
      // task.addData('DeviceID', DeviceID)
      task.start()
    },
    // 提交评价
    submit: function () {
      let $this = this
      if (this.form.shopScore === 0) {
        return this.successTip('店铺评分 必须大于1分', 'warning')
      }
      if (this.form.expressScore === 0) {
        return this.successTip('物流评分 必须大于1分', 'warning')
      }
      if (this.form.content < 5 || this.form.content > 100) {
        return this.successTip('评价内容 长度必须在5,100位之间', 'warning')
      }
      var form = Object.assign({}, $this.form)
      var productScoreMap=Object.assign({},this.form.productScore)

      var productIdArr = Object.keys(productScoreMap)
      var isRight = true
      productIdArr.forEach(function (productId, index) {
        if (productScoreMap[productId] < 1) {
          isRight = false
        } else {
          productScoreMap[productId]= (productScoreMap[productId]*20).toFixed(2)-0
        }
      })
      if (!isRight) {
        return $this.successTip('商品评分 必须大于1分', 'warning')
      }
      form.shopScore *= 20
      if (form.imageArr.length > 0) {
        form.imageArr = form.imageArr.join(',')
      } else {
        form.imageArr = ''
      }
      if (form.hotTag.length > 0) {
        form.hotTag = form.hotTag.join(',')
      } else {
        form.hotTag = ''
      }
      form.expressScore *= 20
      form.productScore = JSON.stringify(productScoreMap)
      $this.MyRequest($this.ApiDoNameMember + 'Order/replySubmit', form, function (data) {
        $this.successTip('评价成功!')
        $this.$router.back()
        $this.$forceUpdate()
      }, function (msg) {
        $this.$message.error(msg)
      })
    },
    // 上传成功
    successUpload: function (response) {
      let $this = this
      if (response.code === 0) {
        if ($this.form.imageArr.length >= $this.limitNums) {
          return $this.successTip('最多只能上传' + $this.limitNums + '个图片/视频')
        }
        $this.form.imageArr.push(response.data)
      } else {
        this.successTip(response.message, 'error')
      }
    },
    // 获取订单评价相关信息
    getPreData: function () {
      let $this = this
      $this.MyRequest($this.ApiDoNameMember + 'Order/preReplySubmit', {
        id: $this.$route.query.id
      }, function (data) {
        var productScore = {}
        data.productList.forEach(function (value, index) {
          productScore[value.id] = 0
        })
        // $this.form.productScore = productScore
        $this.$set($this.form,'productScore',productScore)
        $this.form.id = data.order.id
        $this.order = data.order
        $this.order.replyId=0
        $this.isOnlyShow = false
        $this.productList = data.productList
        $this.$forceUpdate()
      }, function (msg) {
        $this.$message.error(msg)
      })
    },
    // 获取订单评价相关信息
    getDetail: function () {
      let $this = this
      $this.MyRequest($this.ApiDoNameMember + 'Order/replyDetail', {
        id: $this.$route.query.id
      }, function (data) {
        // 商品评分
        $this.productList = data.productList
        var productScore = {}
        var productListMap = {}
        data.productList.forEach(function (value, index) {
          productListMap[value.id] = value
        })
        data.productList.forEach(function (value, index) {
          productScore[value.id] = productListMap[value.id].score
        })
        $this.form.productScore = productScore

        // 评价表单
        $this.form.imageArr = data.orderReply.imageArr
        $this.form.shopScore = (data.orderReply.shopScore/20).toFixed(2)-0
        $this.form.expressScore = (data.orderReply.expressScore/20).toFixed(2)-0
        $this.form.content = data.orderReply.content
        $this.form.hotTag = data.orderReply.hotTag
        $this.isOnlyShow = true
        $this.order.id = $this.$route.query.id
        $this.order.replyId = data.orderReply.id
        $this.$forceUpdate()
      }, function (msg) {
        $this.$message.error(msg)
      })
    },
    // 删除图片
    removeImage: function (imageUrl) {
      let $this = this
      let currIndex = $this.form.imageArr.indexOf(imageUrl)
      var arr = []
      $this.form.imageArr.forEach(function (value, index) {
        if (index !== currIndex) {
          arr.push(value)
        }
      })
      $this.form.imageArr = arr
    },
    // 选中热门标签
    chooseHotTag: function (tag) {
      if (this.form.hotTag!==tag){
        this.form.hotTag=tag
      }else{
        this.form.hotTag=''
      }
      /* if (this.isOnlyShow) {
         return
       }
        let $this = this
       let currIndex = $this.form.hotTag.indexOf(tag)
       if (currIndex === -1) {
         // 增加
         $this.form.hotTag.push(tag)
       } else {
         // 删除
         var arr = []
         $this.form.hotTag.forEach(function (value, index) {
           if (index !== currIndex) {
             arr.push(value)
           }
         })
         $this.form.hotTag = arr
       } */
    }
  }
}
</script>

<style scoped>

</style>
